<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
  <button onclick="decrement()"> - </button>
  <span> 有 <span id="number">0</span> 个</span>
  <button onclick="increment()"> + </button>
</body>
<script>
  /**

   */
  // 创建reducer
  function counter(state, action) {
    if (typeof state === 'undefined') {
      return 10
    }
    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
  }
  // 创建store
  var store = Redux.createStore(counter)
  var dom = document.getElementById('number')
  function render() { dom.innerText = store.getState().toString() }
  render()
  // 监听store变化，如果store变化了就执行render函数
  store.subscribe(render)
  // 对象{ type: 'DECREMENT' }和对象{ type: 'DECREMENT' }是两个action
  function decrement() { store.dispatch({ type: 'DECREMENT' }) }
  function increment() { store.dispatch({ type: 'INCREMENT' }) }
</script>
</html>